<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Instruction</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--<div ng-app="" ng-init="firstName='John'">-->
    <!--<p>在输入框中尝试输入:</p>-->
    <!--<p>姓名: <input type="text" ng-model="firstName"></p>-->
    <!--<p>你的输入为: {{firstName}}</p>-->
<!--</div>-->

<!--数据绑定-->
<!--<div ng-app="" ng-init="quantity=1; price=5">-->
    <!--<h2>价格计算器</h2>-->
    <!--<p>数量: <input type="number" ng-model="quantity"></p>-->
    <!--<p>价格: <input type="number" ng-model="price"></p>-->
    <!--<p><b>总价:</b>{{quantity * price}}</p>-->
<!--</div>-->

<!--重复HTML元素-->
<!--<div ng-app="" ng-init="names=['Jani', 'Hege', 'Kai']">-->
    <!--<p>使用ng-repeat来循环数组</p>-->
    <!--<ul>-->
        <!--<li ng-repeat="x in names">-->
            <!--{{x}}-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->

<!--<div ng-app="" ng-init="names=[-->
<!--{name:'Jani', country:'Norway'},-->
<!--{name:'Hege', country:'Sweden'},-->
<!--{name:'Kai', country:'Denmark'}]">-->
    <!--<p>循环对象</p>-->
    <!--<ul>-->
        <!--<li ng-repeat="x in names">-->
            <!--{{x.name + ', ' + x.country}}-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->

<!--创建自定义命令-->
<!--<div ng-app="myApp">-->
    <!--<runoob-directive></runoob-directive>-->
    <!--<div runoob-directive></div>-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module("myApp", []);-->
    <!--app.directive("runoobDirective", function () {-->
        <!--return {-->
            <!--template: "<h1>自定义命令</h1>"-->
        <!--}-->
    <!--})-->
<!--</script>-->

<!--<div ng-app="myApp">-->
    <!--<div class="runoob-directive"></div>-->
<!--</div>-->
<!--<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>-->
<!--<script>-->
    <!--var app = angular.module("myApp", []);-->
    <!--app.directive("runoobDirective", function () {-->
        <!--return {-->
            <!--restrict: "C",-->
            <!--template: "<h1>自定义命令</h1>"-->
        <!--}-->
    <!--})-->
<!--</script>-->

<div ng-app="myApp">
    <div runoob-directive></div>
</div>
<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>
<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function () {
        return {
            restrict: "A",
            template: "<h1>自定义命令</h1>"
        }
    })
</script>

restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

</body>
</html>